<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <title>邀请好友优惠券列表</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            background-color: #ffffff;
            font-size: 0.24rem;
            font-family: PingFangSC-Regular, sans-serif;
            color: #333333;
        }

        header {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        header p {
            width: 100%;
            height: 0.87rem;
            line-height: 0.87rem;
            text-align: center;
            font-size: 0.34rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
            border-bottom: 1px solid #eeeeee;
        }

        header ul {
            width: 100%;
            height: 0.87rem;
            font-size: 0.24rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0.4rem 0 0.3rem;
            box-sizing: border-box;
            color: rgba(38, 38, 38, 1);
        }

        .ulLists {
            width: 100%;
            height: auto;
            font-size: 0.24rem;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;
        }

        .ulLists li {
            width: 100%;
            height: 0.7rem;
            font-size: 0.24rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0.4rem 0 0.3rem;
            box-sizing: border-box;
            color: rgba(136, 136, 136, 1);
        }

        .ulLists li {
            width: 100%;
            height: 0.7rem;
            font-size: 0.24rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0.4rem 0 0.3rem;
            box-sizing: border-box;
        }

        .ulLists li span {
            width: 25%;
            height: 0.7rem;
            font-size: 0.24rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: flex-start;
        }

        .ulLists li span:last-of-type,
        .ulLists li span:nth-of-type(3) {
            justify-content: center;
        }

        .ulLists li span:nth-of-type(2) {
            padding-left: 0.1rem;
            box-sizing: border-box;
        }

        .ulLists li span:last-of-type {
            padding-left: 0.4rem;
            box-sizing: border-box;
        }

        .listSatus {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            color: rgba(153, 153, 153, 1);
            margin-top: 0.37rem;
        }

        footer {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: #fff;
        }

        footer button {
            outline: none;
            border: none;
            width: 6.9rem;
            height: 0.9rem;
            background: rgba(255, 210, 3, 1);
            border-radius: 0.04rem;
            margin: 0.6rem 0 0.3rem 0;
            font-size: .34rem;
        }

        .nolistImg {
            width: 100%;
            height: auto;
            margin-top: 2.34rem;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
        }

        .nolistImg img {
            width: 1.76rem;
            margin-bottom: 0.2rem;
        }

        article {
            padding-bottom: 1.8rem;
        }
    </style>
</head>

<body>
    <header class="hideslee">
        <!-- <p>
            邀请奖励
        </p> -->
        <ul>
            <li>
                好友账户
            </li>
            <li>
                注册时间
            </li>
            <li>
                奖励现金券
            </li>
            <li>
                现金券状态
            </li>
        </ul>
    </header>
    <article>
        <ul class="ulLists">
            <!-- <li>
                <span>151****9362</span>
                <span>2020.02.10</span>
                <span>50 CNY</span>
                <span style="color: #F4A62B;">已激活</span>
            </li>
            <li>
                <span>151****9362</span>
                <span>2020.02.10</span>
                <span>50 CNY</span>
                <span>未激活</span>
            </li> -->
        </ul>
        <div class="listSatus">
            加载更多
        </div>
        <div class="nolistImg" style="display: none;">
            <img src="../../image/nolistimg.png" alt="">
            <span>
                暂无邀请奖励
            </span>
        </div>
    </article>
    <footer>
        <button class="go-page"
            data-param='{"page":"common/headerwin","name":"meachiencoupon_headerwin","param":{"subpage":"my/meachiencoupon","name":"meachiencoupon","title":"优惠券","couponHeader":"true"}}'>
            我的优惠券
        </button>
    </footer>
</body>
<script src="../../script/autosize.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/dotmin.js"></script>
<script src="../../script/app.js"></script>
<script type="text/html" id="indent">
        {{~it:item:index}}
            <li>
                <span>{{=item.telphone}}</span>
                <span>{{=item.regTime}}</span>
                <span>{{=item.coupon}}</span>
                {{?item.status==1}}
                    <span style="color: #F4A62B;">已激活</span>
                {{??}}
                    <span>未激活</span>
                {{?}}
            </li>
        {{~}}
    </script>
<script>
    apiready = function () {
        var app = new APP();
        var account = app.getAccount();
        app.handlePage();
        var curPage = 1;//当前页
        var totalPage = 0;//总页数
        var is_display = "0";//0 表示不隐藏  1 表示隐藏
        function couponList(curPage, isdown, is_display) {
            app.ajaxPro({
                url: "member/coupon",
                values: {
                    token: account.token,
                    page: curPage,
                    currencyCode: "CNY",
                    pageSize: 20
                },
                openFlower: true
            }, function (ret) {
                app.stopRefresh();
                if (ret.code == 200) {
                    totalPage = ret.data.total;
                    var temp = doT.template($("#indent").text());
                    if (isdown) {
                        $(".ulLists").html(temp(ret.data.lists));
                    } else {
                        $(".ulLists").append(temp(ret.data.lists));
                    }
                    if (ret.data.lists.length == 0 || totalPage == 1 || ret.data.lists.length < 20) {
                        $(".listSatus").show().text("没有更多了");
                        $(".hideslee").show();
                    }
                    if (ret.data.lists.length == 0 && totalPage == 0) {
                        $(".nolistImg").show();
                        $(".listSatus,.hideslee").hide();
                    }
                }
            });
        }
        couponList(curPage, true, is_display);
        app.downRefresh(function () {
            curPage = 1;
            totalPage = 0;
            $(".ulLists").empty();
            couponList(curPage, true, is_display);
        });
        app.toBottom(function () {
            if (curPage < totalPage) {
                curPage++;
                couponList(curPage, false, is_display);
            }
        })
        app.headerMap();
    }
</script>

</html>